<script lang="ts" setup>
import { Modal, message } from 'ant-design-vue';
import useUserStore from '@/store/modules/user';
// 获取标签数据
const tags = ref<string[]>([]);
const userStore = useUserStore();
const tokenname = userStore.userId;
let adminId = 0;
async function getTags() {
  await getImgInfoToUser().then((res: any) => {
    for (let i = 0; i < res.data.length; i++) {
      if (res.data[i].tokenName === tokenname && res.data[i].isAdmin === true) {
        tags.value = res.data[i].tags.split(',');
        adminId = res.data[i].id;
        break;
      }
    }
  });
}
onMounted(() => {
  getTags();
});

// 标签
const addTagsName = ref<string>('');
const tagsmsg = ref<string>('');

// 标签添加
const visible = ref<boolean>(false);

function showModal() {
  visible.value = true;
}

async function addTags() {
  const oldtags: string[] = tags.value;
  oldtags.push(addTagsName.value);
  const newtags = oldtags.join(',');
  const newItem = {
    id: adminId,
    tokenName: tokenname,
    link: '',
    downloadCount: 0,
    tags: newtags,
    isAdmin: true,
  };
  await updateImgUser(newItem).then(() => {
    message.success('添加标签成功！');
    getTags();
  });
}

function handleOk() {
  if (addTagsName.value.length === 0) {
    tagsmsg.value = '标签名不能为空';
  }
  else {
    tagsmsg.value = '';
    addTags();
    visible.value = false;
  }
}

// 删除标签
async function deleteTagsItem(delitem: string) {
  const newtags = tags.value;
  const filteredArr = newtags.filter(item => item !== delitem);
  const newStr = filteredArr.join(',');
  const newItem = {
    id: adminId,
    tokenName: tokenname,
    link: '',
    downloadCount: 0,
    tags: newStr,
    isAdmin: true,
  };
  await updateImgUser(newItem).then(() => {
    message.success('删除标签成功！');
    getTags();
  });
}

function deleteTags(item: string) {
  Modal.confirm({
    title: () => '确定要删除吗？',
    okText: () => '是的',
    okType: 'danger',
    cancelText: () => '取消',
    onOk() {
      deleteTagsItem(item);
    },
  });
}
</script>

<template>
  <div>
    <div class="header">
      <div class="left">
        <a-space>
          <div class="pjTitle">
            标签管理
          </div>
          <a-button type="link" @click="showModal">
            添加
          </a-button>
        </a-space>
      </div>
    </div>
    <a-modal v-model:visible="visible" title="添加标签" @ok="handleOk">
      <a-input v-model:value="addTagsName" placeholder="请输入标签" />
      <div style="margin-left: 0.2vw;font-size: 1vw;color: red;">
        *{{ tagsmsg }}
      </div>
    </a-modal>
    <div class="tags">
      <a-list :grid="{ gutter: 5, column: 6 }" :data-source="tags">
        <template #renderItem="{ item }">
          <a-list-item class="tags" style="cursor: default;">
            <a-card>
              <div class="tagsItem">
                <span class="tagsData">{{ item }}</span>
                <CloseOutlined @click="deleteTags(item)" />
              </div>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 3vw;
  margin-bottom: 0.5vw;

  .pjTitle {
    padding-left: 1vw;
    background: url("@/assets/images/title-left-bg.svg") no-repeat;
  }

  .right {
    display: flex;
    align-items: center;
  }
}

.content {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 66.667vw;
  overflow-y: auto;

  .tags {
    width: 95%;

    .tagsItem {
      display: flex;
      width: 100%;

      .tagsData {
        flex: 1;
      }
    }
  }
}
</style>
